import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Filter, ChevronDown, Search } from 'lucide-react';
export function Reports() {
  const [activeCategory, setActiveCategory] = useState('all');
  const [activeBrand, setActiveBrand] = useState('all');
  const [sortBy, setSortBy] = useState('newest');
  // Sample reports data
  const allReports = [{
    id: 'arc-teryx-beta-ar',
    title: "ARC'TERYX BETA AR JACKET",
    excerpt: 'Tested through torrential downpours in the Pacific Northwest, this premium shell delivers bombproof protection for serious alpine adventures.',
    image: 'https://images.unsplash.com/photo-1608235375712-be654ace4420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80',
    category: 'Shell Jackets',
    brand: "Arc'teryx",
    rating: 5,
    date: '2023-05-15',
    featured: true
  }, {
    id: 'la-sportiva-ultra-raptor-2',
    title: 'LA SPORTIVA ULTRA RAPTOR II',
    excerpt: 'After 500 kilometers of technical alpine trails, these rugged trail runners proved their worth on rocky, muddy, and steep terrain.',
    image: 'https://images.unsplash.com/photo-1465479423260-c4afc24172c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80',
    category: 'Trail Running',
    brand: 'La Sportiva',
    rating: 4,
    date: '2023-04-28',
    featured: false
  }, {
    id: 'black-diamond-momentum-harness',
    title: 'BLACK DIAMOND MOMENTUM HARNESS',
    excerpt: 'An entry-level workhorse put to the test across multiple climbing disciplines, from gym sessions to multi-pitch trad routes.',
    image: 'https://images.unsplash.com/photo-1522163182402-834f871fd851?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80',
    category: 'Climbing Gear',
    brand: 'Black Diamond',
    rating: 4,
    date: '2023-04-10',
    featured: false
  }, {
    id: 'osprey-atmos-ag-65',
    title: 'OSPREY ATMOS AG 65 BACKPACK',
    excerpt: 'The Anti-Gravity suspension system redefines comfort for multi-day backpacking trips, even when fully loaded with gear.',
    image: 'https://images.unsplash.com/photo-1602156498253-ad0c84c1d008?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80',
    category: 'Backpacks',
    brand: 'Osprey',
    rating: 5,
    date: '2023-03-22',
    featured: true
  }, {
    id: 'msr-hubba-hubba-nx',
    title: 'MSR HUBBA HUBBA NX 2-PERSON TENT',
    excerpt: 'Lightweight, easy to set up, and surprisingly spacious, this tent withstood three seasons of heavy use across diverse environments.',
    image: 'https://images.unsplash.com/photo-1504851149312-7a075b496cc7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80',
    category: 'Tents',
    brand: 'MSR',
    rating: 4,
    date: '2023-03-15',
    featured: false
  }, {
    id: 'patagonia-r1-fleece',
    title: 'PATAGONIA R1 FLEECE PULLOVER',
    excerpt: 'The classic technical mid-layer that continues to set the standard for versatility, breathability, and comfort in the backcountry.',
    image: 'https://images.unsplash.com/photo-1478826160983-e6db8c7d537a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80',
    category: 'Mid Layers',
    brand: 'Patagonia',
    rating: 5,
    date: '2023-02-28',
    featured: false
  }, {
    id: 'garmin-fenix-7',
    title: 'GARMIN FĒNIX 7 GPS WATCH',
    excerpt: 'A premium multisport GPS watch with comprehensive navigation features and exceptional battery life for extended backcountry adventures.',
    image: 'https://images.unsplash.com/photo-1579586337278-3befd40fd17a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80',
    category: 'Electronics',
    brand: 'Garmin',
    rating: 4,
    date: '2023-02-15',
    featured: true
  }, {
    id: 'nemo-disco-15',
    title: 'NEMO DISCO 15 SLEEPING BAG',
    excerpt: 'Innovative spoon shape provides extra room at the elbows and knees, allowing side sleepers to find comfort in the backcountry.',
    image: 'https://images.unsplash.com/photo-1520645521318-f03a712f0e67?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80',
    category: 'Sleeping Gear',
    brand: 'NEMO',
    rating: 4,
    date: '2023-01-30',
    featured: false
  }, {
    id: 'dps-wailer-112',
    title: 'DPS WAILER 112 RP SKIS',
    excerpt: 'Versatile powder skis that float through deep snow but still carve effectively on groomed runs, making them ideal for backcountry adventures.',
    image: 'https://images.unsplash.com/photo-1605540436563-5bca919ae766?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80',
    category: 'Winter Sports',
    brand: 'DPS',
    rating: 5,
    date: '2023-01-15',
    featured: false
  }];
  // Extract unique categories and brands for filters
  const categories = ['all', ...new Set(allReports.map(report => report.category.toLowerCase()))];
  const brands = ['all', ...new Set(allReports.map(report => report.brand.toLowerCase()))];
  // Filter reports based on selected filters
  const filteredReports = allReports.filter(report => {
    if (activeCategory !== 'all' && report.category.toLowerCase() !== activeCategory) return false;
    if (activeBrand !== 'all' && report.brand.toLowerCase() !== activeBrand) return false;
    return true;
  }).sort((a, b) => {
    if (sortBy === 'newest') return new Date(b.date) - new Date(a.date);
    if (sortBy === 'highest') return b.rating - a.rating;
    if (sortBy === 'lowest') return a.rating - b.rating;
    return 0;
  });
  // Format date to readable string
  const formatDate = dateString => {
    const options = {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    };
    return new Date(dateString).toLocaleDateString(undefined, options);
  };
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative h-[50vh] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="Expedition gear testing" className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-carbon-black opacity-60"></div>
        </div>
        <div className="container mx-auto px-4 relative z-10 text-center">
          <h1 className="font-display text-5xl md:text-7xl text-white mb-4 drop-shadow-lg">
            EXPEDITION REPORTS
          </h1>
          <p className="text-xl md:text-2xl text-sand-light mb-8 max-w-3xl mx-auto drop-shadow-md">
            In-depth analysis and field testing of the latest outdoor gear
          </p>
        </div>
      </section>
      {/* Search and Filter Section */}
      <section className="py-8 bg-carbon-black sticky top-[73px] z-30">
        <div className="container mx-auto px-4">
          <div className="flex flex-col lg:flex-row justify-between items-center gap-4">
            {/* Search */}
            <div className="w-full lg:w-1/3 relative">
              <input type="text" placeholder="Search reports..." className="w-full bg-earth-dark border border-gray-700 rounded-full px-5 py-2 pl-10 focus:outline-none focus:border-outdoor-orange transition-colors" />
              <Search size={18} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
            </div>
            {/* Filters */}
            <div className="flex flex-wrap items-center gap-4 w-full lg:w-2/3 justify-end">
              {/* Category Filter */}
              <div className="relative">
                <select value={activeCategory} onChange={e => setActiveCategory(e.target.value)} className="appearance-none bg-earth-dark border border-gray-700 rounded-full px-5 py-2 pr-10 focus:outline-none focus:border-outdoor-orange transition-colors">
                  <option value="all">All Categories</option>
                  {categories.filter(cat => cat !== 'all').map((category, index) => <option key={index} value={category}>
                        {category.charAt(0).toUpperCase() + category.slice(1)}
                      </option>)}
                </select>
                <ChevronDown size={16} className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none" />
              </div>
              {/* Brand Filter */}
              <div className="relative">
                <select value={activeBrand} onChange={e => setActiveBrand(e.target.value)} className="appearance-none bg-earth-dark border border-gray-700 rounded-full px-5 py-2 pr-10 focus:outline-none focus:border-outdoor-orange transition-colors">
                  <option value="all">All Brands</option>
                  {brands.filter(brand => brand !== 'all').map((brand, index) => <option key={index} value={brand}>
                        {brand.charAt(0).toUpperCase() + brand.slice(1)}
                      </option>)}
                </select>
                <ChevronDown size={16} className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none" />
              </div>
              {/* Sort By */}
              <div className="relative">
                <select value={sortBy} onChange={e => setSortBy(e.target.value)} className="appearance-none bg-earth-dark border border-gray-700 rounded-full px-5 py-2 pr-10 focus:outline-none focus:border-outdoor-orange transition-colors">
                  <option value="newest">Newest First</option>
                  <option value="highest">Highest Rated</option>
                  <option value="lowest">Lowest Rated</option>
                </select>
                <ChevronDown size={16} className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none" />
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* Featured Report */}
      {filteredReports.find(report => report.featured) && <section className="py-12">
          <div className="container mx-auto px-4">
            <h2 className="font-display text-3xl md:text-4xl mb-8">
              FEATURED REPORT
            </h2>
            {(() => {
          const featuredReport = filteredReports.find(report => report.featured);
          return <Link to={`/review/${featuredReport.id}`} className="group">
                  <div className="bg-carbon-black rounded-lg overflow-hidden">
                    <div className="grid grid-cols-1 lg:grid-cols-2">
                      <div className="relative h-64 lg:h-auto overflow-hidden">
                        <img src={featuredReport.image} alt={featuredReport.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                        <div className="absolute top-0 left-0 bg-outdoor-orange px-4 py-2 font-display">
                          FEATURED
                        </div>
                      </div>
                      <div className="p-8">
                        <div className="flex items-center mb-2">
                          <span className="text-outdoor-orange font-display mr-2">
                            {'★'.repeat(featuredReport.rating) + '☆'.repeat(5 - featuredReport.rating)}
                          </span>
                          <span className="text-gray-400">
                            {formatDate(featuredReport.date)}
                          </span>
                        </div>
                        <h3 className="font-display text-3xl mb-2 group-hover:text-outdoor-orange transition-colors">
                          {featuredReport.title}
                        </h3>
                        <div className="mb-4">
                          <span className="bg-earth-dark px-3 py-1 rounded-full text-sm">
                            {featuredReport.category}
                          </span>
                        </div>
                        <p className="text-gray-300 mb-6">
                          {featuredReport.excerpt}
                        </p>
                        <div className="flex items-center text-outdoor-orange">
                          <span className="mr-2">Read Full Report</span>
                          <ArrowRight size={16} className="transition-transform group-hover:translate-x-1" />
                        </div>
                      </div>
                    </div>
                  </div>
                </Link>;
        })()}
          </div>
        </section>}
      {/* All Reports Grid */}
      <section className="py-12">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-3xl md:text-4xl mb-8">
            ALL REPORTS
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredReports.map(report => <Link key={report.id} to={`/review/${report.id}`} className="group">
                <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                  <div className="relative h-48 overflow-hidden">
                    <img src={report.image} alt={report.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                    <div className="absolute top-0 left-0 bg-outdoor-orange px-3 py-1">
                      <span className="font-display text-sm">
                        {report.category}
                      </span>
                    </div>
                  </div>
                  <div className="p-6 flex flex-col flex-grow">
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-outdoor-orange font-display">
                        {'★'.repeat(report.rating) + '☆'.repeat(5 - report.rating)}
                      </span>
                      <span className="text-gray-400 text-sm">
                        {formatDate(report.date)}
                      </span>
                    </div>
                    <h3 className="font-display text-xl mb-3 group-hover:text-outdoor-orange transition-colors">
                      {report.title}
                    </h3>
                    <p className="text-gray-300 mb-4 flex-grow">
                      {report.excerpt}
                    </p>
                    <div className="flex items-center text-outdoor-orange mt-auto">
                      <span className="mr-2">Read Full Report</span>
                      <ArrowRight size={16} className="transition-transform group-hover:translate-x-1" />
                    </div>
                  </div>
                </div>
              </Link>)}
          </div>
        </div>
      </section>
    </div>;
}